<template>
    <div class="expert-audit-container">
        <!-- 页面头部 -->
        <div class="page-header">
            <div class="header-content">
                <div class="header-left">
                    <h2>专家审核</h2>
                </div>
                <div class="header-right">
                    <el-button @click="goBack">
                        <el-icon><ArrowLeft /></el-icon>
                        返回
                    </el-button>
                </div>
            </div>
        </div>

        <!-- 审核内容 -->
        <div class="audit-content">
            <!-- 服务商信息 -->
            <el-card shadow="never" class="info-card">
                <template #header>
                    <div class="card-header">
                        <span class="card-title">服务商信息</span>
                    </div>
                </template>
                <div class="info-grid">
                    <div class="info-left">
                        <div class="info-item">
                            <span class="label">服务商名称:</span>
                            <span class="value">{{ serviceProviderInfo.name }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">电话:</span>
                            <span class="value">{{ serviceProviderInfo.phone }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">联系人:</span>
                            <span class="value">{{ serviceProviderInfo.contact }}</span>
                        </div>
                    </div>
                </div>
            </el-card>

            <!-- 人员信息 -->
            <el-card shadow="never" class="info-card">
                <template #header>
                    <div class="card-header">
                        <span class="card-title">人员信息</span>
                    </div>
                </template>
                <div class="info-grid">
                    <div class="info-left">
                        <div class="info-item">
                            <span class="label">真实姓名:</span>
                            <span class="value">{{ expertInfo.realName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">电话:</span>
                            <span class="value">{{ expertInfo.phone }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">性别:</span>
                            <span class="value">{{ expertInfo.gender }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">目前职业:</span>
                            <span class="value">{{ expertInfo.occupation }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">证件照片:</span>
                            <div class="value">
                                <div class="id-photos">
                                    <div class="photo-item" @click="previewImage('id-front.jpg')">
                                        <img src="https://via.placeholder.com/120x80/409EFF/FFFFFF?text=证件正面" alt="证件正面" />
                                    </div>
                                    <div class="photo-item" @click="previewImage('id-back.jpg')">
                                        <img src="https://via.placeholder.com/120x80/409EFF/FFFFFF?text=证件反面" alt="证件反面" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="info-item">
                            <span class="label">从业经验:</span>
                            <span class="value">{{ expertInfo.experience }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">擅长领域:</span>
                            <span class="value">{{ expertInfo.expertise }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">个人头衔:</span>
                            <span class="value">{{ expertInfo.title }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">分配权限:</span>
                            <div class="value">
                                <div class="permission-buttons">
                                    <div class="permission-item">
                                        <span class="permission-label">商品</span>
                                        <div class="permission-toggle" :class="{ active: permissions.products }" @click="togglePermission('products')">
                                            <div class="toggle-button" :class="{ enabled: permissions.products }">
                                                <el-icon v-if="permissions.products" class="check-icon">
                                                    <Check />
                                                </el-icon>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="permission-item">
                                        <span class="permission-label">服务</span>
                                        <div class="permission-toggle" :class="{ active: permissions.services }" @click="togglePermission('services')">
                                            <div class="toggle-button" :class="{ enabled: permissions.services }">
                                                <el-icon v-if="permissions.services" class="check-icon">
                                                    <Check />
                                                </el-icon>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="permission-item">
                                        <span class="permission-label">咨询</span>
                                        <div class="permission-toggle" :class="{ active: permissions.consultation }" @click="togglePermission('consultation')">
                                            <div class="toggle-button" :class="{ enabled: permissions.consultation }">
                                                <el-icon v-if="permissions.consultation" class="check-icon">
                                                    <Check />
                                                </el-icon>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="permission-item">
                                        <span class="permission-label">内容</span>
                                        <div class="permission-toggle" :class="{ active: permissions.content }" @click="togglePermission('content')">
                                            <div class="toggle-button" :class="{ enabled: permissions.content }">
                                                <el-icon v-if="permissions.content" class="check-icon">
                                                    <Check />
                                                </el-icon>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="info-right">
                        <div class="info-item">
                            <span class="label">申请时间:</span>
                            <span class="value">{{ expertInfo.applicationTime }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">证件号:</span>
                            <span class="value">{{ expertInfo.idNumber }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">所在城市:</span>
                            <span class="value">{{ expertInfo.city }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">证件类型:</span>
                            <span class="value">{{ expertInfo.idType }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">从业年限:</span>
                            <span class="value">{{ expertInfo.yearsOfExperience }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">收费情况:</span>
                            <span class="value">{{ expertInfo.chargingSituation }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">学习经历:</span>
                            <span class="value">{{ expertInfo.education }}</span>
                        </div>
                    </div>
                </div>
            </el-card>

            <!-- 审批记录 -->
            <el-card shadow="never" class="info-card">
                <template #header>
                    <div class="card-header">
                        <span class="card-title">审批记录</span>
                    </div>
                </template>
                <div class="approval-record">
                    <div class="approval-item">
                        <div class="approval-line">
                            <div class="approval-info">
                                <span class="label">审批人:</span>
                                <span class="value">{{ approvalRecord.approver }}</span>
                            </div>
                            <div class="approval-info">
                                <span class="label">申请时间:</span>
                                <span class="value">{{ approvalRecord.applicationTime }}</span>
                            </div>
                        </div>
                        <div class="approval-line">
                            <span class="label">审批说明:</span>
                            <span class="value">{{ approvalRecord.description }}</span>
                        </div>
                    </div>
                </div>
            </el-card>

            <!-- 待审核 -->
            <el-card shadow="never" class="info-card">
                <template #header>
                    <div class="card-header">
                        <span class="card-title">待审核</span>
                    </div>
                </template>
                <div class="pending-review">
                    <div class="review-form">
                        <div class="form-item">
                            <span class="label">审批人:</span>
                            <div class="value">
                                <el-input v-model="pendingReview.approver" placeholder="admin" />
                            </div>
                        </div>
                        <div class="form-item">
                            <span class="label">不通过原因:</span>
                            <div class="value">
                                <el-input 
                                    v-model="pendingReview.rejectionReason" 
                                    type="textarea" 
                                    :rows="4" 
                                    placeholder="请输入不通过原因"
                                />
                            </div>
                        </div>
                        <div class="review-actions">
                            <el-button type="danger" @click="handleReject">不通过</el-button>
                            <el-button type="primary" @click="handleApprove">通过</el-button>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 图片预览对话框 -->
        <el-dialog v-model="imagePreviewVisible" title="图片预览" width="800px">
            <img :src="previewImageUrl" alt="Preview Image" style="width: 100%; display: block;" />
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ArrowLeft, Check } from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();

const id = route.params.id as string;

// 服务商信息
const serviceProviderInfo = reactive({
    name: '服务商1',
    phone: '17458585785',
    contact: '周波'
});

// 专家信息
const expertInfo = reactive({
    realName: '周波',
    phone: '17458585785',
    gender: '男',
    occupation: '全职',
    applicationTime: '2025 7/20 16:55:22',
    idNumber: '43112119900877874445',
    city: '湖南长沙',
    idType: '身份证/护照',
    experience: '经验丰富经验丰富经验丰富经验丰富经验丰富经验丰富经验丰富经验丰富经验丰富经验丰富经验丰富经验丰富经验丰富经验丰富经验丰富经验丰富经验丰富经验丰富经验丰富经验丰富',
    expertise: '擅长领域',
    title: '协会会长',
    yearsOfExperience: '14年',
    chargingSituation: '年新100万',
    education: '本科'
});

// 权限配置
const permissions = reactive({
    products: false,
    services: false,
    consultation: false,
    content: false
});

// 审批记录
const approvalRecord = reactive({
    approver: 'admin',
    applicationTime: '2025 7/20 16:55:22',
    description: '审批内容说明审批内容说明审批内容说明审批内容说明审批内容说明审批内容说明审批内容说明',
    isRejected: true
});

// 待审核
const pendingReview = reactive({
    approver: 'admin',
    rejectionReason: ''
});

// 图片预览
const imagePreviewVisible = ref(false);
const previewImageUrl = ref('');

// 权限切换
const togglePermission = (permissionType: keyof typeof permissions) => {
    permissions[permissionType] = !permissions[permissionType];
    ElMessage.success(`${permissions[permissionType] ? '启用' : '禁用'}${getPermissionLabel(permissionType)}权限`);
};

// 获取权限标签
const getPermissionLabel = (type: keyof typeof permissions) => {
    const labels = { 
        products: '商品', 
        services: '服务', 
        consultation: '咨询', 
        content: '内容' 
    };
    return labels[type];
};

// 图片预览
const previewImage = (imageName: string) => {
    previewImageUrl.value = `https://via.placeholder.com/800x600/409EFF/FFFFFF?text=${encodeURIComponent(imageName)}`;
    imagePreviewVisible.value = true;
};

// 返回
const goBack = () => {
    router.push('/expert-list');
};

// 通过审核
const handleApprove = () => {
    ElMessageBox.confirm(
        '确定要通过此专家的审核吗？',
        '审核确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'success',
        }
    ).then(() => {
        ElMessage.success('审核通过');
        goBack();
    }).catch(() => {
        ElMessage.info('已取消操作');
    });
};

// 拒绝审核
const handleReject = () => {
    if (!pendingReview.rejectionReason.trim()) {
        ElMessage.warning('请填写不通过原因');
        return;
    }
    
    ElMessageBox.confirm(
        '确定要拒绝此专家的审核吗？',
        '审核确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    ).then(() => {
        ElMessage.success('审核已拒绝');
        goBack();
    }).catch(() => {
        ElMessage.info('已取消操作');
    });
};

onMounted(() => {
    // 根据ID加载专家数据
    console.log('加载专家审核数据，ID:', id);
});
</script>

<style scoped>
.expert-audit-container {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.page-header {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left h2 {
    margin: 0;
    color: #333;
    font-size: 24px;
}

.audit-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.info-left, .info-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-item .label {
    min-width: 100px;
    color: #666;
    font-weight: 500;
}

.info-item .value {
    flex: 1;
    color: #333;
    word-break: break-all;
}

.id-photos {
    display: flex;
    gap: 12px;
}

.photo-item {
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s;
}

.photo-item:hover {
    border-color: #409EFF;
    transform: scale(1.05);
}

.photo-item img {
    width: 120px;
    height: 80px;
    object-fit: cover;
}

.permission-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.permission-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.permission-label {
    min-width: 60px;
    font-size: 12px;
    color: #666;
}

.permission-toggle {
    width: 40px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f5f5f5;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.permission-toggle.active {
    background-color: #409EFF;
    border-color: #409EFF;
}

.toggle-button {
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 1px;
    left: 1px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-button.enabled {
    left: 21px;
}

.check-icon {
    font-size: 10px;
    color: #409EFF;
}

.approval-record {
    padding: 16px 0;
}

.approval-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 16px;
}

.approval-line {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 12px;
    line-height: 1.5;
}

.approval-line:last-child {
    margin-bottom: 0;
}

.approval-info {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 8px;
}

.approval-info .label {
    color: #666;
    font-weight: 500;
    font-size: 14px;
}

.approval-info .value {
    color: #333;
    font-size: 14px;
}

.rejection-status {
    color: #f56c6c;
    font-weight: 600;
    font-size: 14px;
    margin-left: auto;
}

.approval-line .label {
    color: #666;
    font-weight: 500;
    font-size: 14px;
}

.approval-line .value {
    color: #333;
    font-size: 14px;
    word-break: break-all;
    flex: 1;
}

.pending-review {
    padding: 16px 0;
}

.review-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.form-item .label {
    min-width: 100px;
    color: #666;
    font-weight: 500;
    padding-top: 8px;
}

.form-item .value {
    flex: 1;
}

.review-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .header-content {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .approval-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .review-actions {
        justify-content: center;
    }
    
    .id-photos {
        flex-direction: column;
    }
    
    .permission-buttons {
        gap: 8px;
    }
}
</style>
